<template>
  <div class="drill">
    <div class="top">
      <el-card class="cardTop">
        <div class="leftTop">
          <div class="son">
            <div class="text">算力使用</div>
            <div id="myEcharts1"></div>
            <div class="text2">总算力/空余/使用</div>
          </div>

          <div class="line"></div>
          <div class="son1">
            <div class="text">数据集量</div>
            <div class="sonsonALL">
              <div class="sonson">
                <div class="img">
                  <img src="../../assets//image/测试集.png" alt="" srcset="" />
                </div>
                <div class="text">测试集</div>
                <div class="number">102</div>
              </div>
              <div class="sonson">
                <div class="img">
                  <img src="../../assets//image/菜单.png" alt="" srcset="" />
                </div>
                <div class="text">训练集</div>
                <div class="number">102</div>
              </div>
              <div class="sonson">
                <div class="img">
                  <img src="../../assets//image/总量.png" alt="" srcset="" />
                </div>
                <div class="text">总量</div>
                <div class="number">102</div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="son">
            <div class="text">模型数量</div>
            <div id="myEcharts2"></div>
            <div class="text2">在线/离线/总数</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 下边 -->
    <div class="down">
      <el-card class="cardDown">
        <div class="text">部署量</div>
        <div class="echarts"><div id="myEcharts"></div></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ElCard } from 'element-plus'

import { reactive, ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

let chartInstance1 = null
function initChart1 () {
  const chartDom = document.getElementById('myEcharts1')
  if (chartInstance1) {
    // 在初始化图表之前，可能已经存在一个使用相同 DOM 元素的图表实例 , 会报警告"[ECharts] There is a chart instance already initialized on the dom."
    chartInstance1.dispose()
  }

  chartInstance1 = echarts.init(chartDom)

  chartInstance1.setOption({
    title: [
      {
        text: '70k',
        x: 'center',
        top: '43%',
        textStyle: {
          fontSize: '30',
          color: '#1f1f1f',
          fontFamily: 'DINAlternate-Bold, DINAlternate',
          foontWeight: '600'
        }
      }
    ],
    polar: {
      radius: ['42%', '52%'],
      center: ['50%', '50%']
    },
    angleAxis: {
      max: 100,
      show: false
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 90,
        showBackground: true,
        backgroundStyle: {
          color: '#dee5ec'
        },
        data: [70],
        coordinateSystem: 'polar',

        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: '#1296db'
            },
            {
              offset: 1,
              color: '#91D5FF'
            }
          ])
        }
      },
      {
        name: '',
        type: 'pie',
        startAngle: 80,
        radius: ['56%'],
        center: ['50%', '50%'],
        itemStyle: {
          color: 'rgba(66, 66, 66, .1)'
        },
        data: [100]
      },
      {
        name: '',
        type: 'pie',
        startAngle: 80,
        radius: ['38%'],
        center: ['50%', '50%'],
        itemStyle: {
          color: '#fff'
        },
        data: [100]
      }
    ]
  })

  window.onresize = function () {
    //自适应大小
    chartInstance1.resize()
  }
}

let chartInstance2 = null
function initChart2 () {
  const chartDom = document.getElementById('myEcharts2')
  if (chartInstance2) {
    // 在初始化图表之前，可能已经存在一个使用相同 DOM 元素的图表实例 , 会报警告"[ECharts] There is a chart instance already initialized on the dom."
    chartInstance2.dispose()
  }

  chartInstance2 = echarts.init(chartDom)

  chartInstance2.setOption({
    title: [
      {
        text: '2000',
        x: 'center',
        top: '43%',
        textStyle: {
          fontSize: '30',
          color: '#1f1f1f',
          fontFamily: 'DINAlternate-Bold, DINAlternate',
          foontWeight: '600'
        }
      }
    ],
    polar: {
      radius: ['42%', '52%'],
      center: ['50%', '50%']
    },
    angleAxis: {
      max: 100,
      show: false
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 90,
        showBackground: true,
        backgroundStyle: {
          color: '#dee5ec'
        },
        data: [70],
        coordinateSystem: 'polar',

        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: '#1296db'
            },
            {
              offset: 1,
              color: '#91D5FF'
            }
          ])
        }
      },
      {
        name: '',
        type: 'pie',
        startAngle: 80,
        radius: ['56%'],
        center: ['50%', '50%'],
        itemStyle: {
          color: 'rgba(66, 66, 66, .1)'
        },
        data: [100]
      },
      {
        name: '',
        type: 'pie',
        startAngle: 80,
        radius: ['38%'],
        center: ['50%', '50%'],
        itemStyle: {
          color: '#fff'
        },
        data: [100]
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chartInstance2.resize()
  }
}

let chartInstance = null
function initChart () {
  const chartDom = document.getElementById('myEcharts')
  if (chartInstance) {
    // 在初始化图表之前，可能已经存在一个使用相同 DOM 元素的图表实例 , 会报警告"[ECharts] There is a chart instance already initialized on the dom."
    chartInstance.dispose()
  }

  chartInstance = echarts.init(chartDom)
  var colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']

  // 现在的长条形
  chartInstance.setOption({
    title: {
      textStyle: {
        fontSize: 12,
        fontWeight: 400
      },
      left: 'center',
      top: '5%'
    },
    legend: {
      icon: 'circle',
      top: '5%',
      right: '5%',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#556677'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0
        },
        lineStyle: {
          width: 0
        }
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c'
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    grid: {
      top: '15%'
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,

          color: '#556677',

          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        axisPointer: {
          label: {
            // padding: [11, 5, 7],
            padding: [0, 0, 10, 0],

            // 这里的margin和axisLabel的margin要一致!
            margin: 15,
            // 移入时的字体大小
            fontSize: 12,
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#fff' // 0% 处的颜色
                },
                {
                  // offset: 0.9,
                  offset: 0.86,
                  /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                        */
                  color: '#fff' // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: '#33c0cd' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#33c0cd' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        boundaryGap: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisLabel: {
          color: '#556677'
        },
        splitLine: {
          show: false
        }
      },
      {
        type: 'value',
        position: 'right',
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#556677',
          formatter: '{value}'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '数据1',
        type: 'line',
        data: [10, 10, 30, 12, 15, 3, 7],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: '#9effff'
            },
            {
              offset: 1,
              color: '#9E87FF'
            }
          ]),
          shadowColor: 'rgba(158,135,255, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          color: colorList[0],
          borderColor: colorList[0]
        }
      },
      {
        name: '数据2',
        type: 'line',
        data: [5, 12, 11, 14, 25, 16, 10],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: '#73DD39'
            },
            {
              offset: 1,
              color: '#73DDFF'
            }
          ]),
          shadowColor: 'rgba(115,221,255, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          color: colorList[1],
          borderColor: colorList[1]
        }
      },
      {
        name: '数据3',
        type: 'line',
        data: [150, 120, 170, 140, 500, 160, 110],
        symbolSize: 1,
        yAxisIndex: 1,
        symbol: 'circle',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#fe9a'
            },
            {
              offset: 1,
              color: '#fe9a8b'
            }
          ]),
          shadowColor: 'rgba(254,154,139, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          color: colorList[2],
          borderColor: colorList[2]
        }
      }
    ]
  })

  window.onresize = function () {
    //自适应大小
    chartInstance.resize()
  }
}

onMounted(() => {
  initChart1()
  initChart2()
  initChart()
})

onUnmounted(() => {
  if (chartInstance1) {
    chartInstance1.dispose()
  }
  if (chartInstance2) {
    chartInstance2.dispose()
  }
  if (chartInstance) {
    chartInstance.dispose()
  }
})
</script>

<style lang="less" scoped>
.drill {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  .top {
    padding: 20px 35px 20px 35px;
    width: 100%;
    .cardTop {
      width: 100%;
      height: 300px;
      ::v-deep(.el-card__body) {
        width: 100%;
        height: 100%;
      }
      .leftTop {
        margin-bottom: 30px;
        color: #1b1b1b;
        font-size: 18px;
        font-weight: bold;

        display: flex;

        .son1 {
          width: 33.33%;

          .sonsonALL {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            .sonson {
              width: 33.33%;
              img {
                width: 40px;
                height: 40px;
              }
              .text {
                margin-top: 30px;
              }
              .number {
                margin-top: 30px;
              }
            }
          }
        }

        .son {
          position: relative;
          width: 33%;

          .text {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }

          .text2 {
            position: absolute;
            top: 100%;
            left: 40%;
            transform: translateX(-50%), translateY(-100%);
          }
          #myEcharts1 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 300px;
            width: 300px;
          }
          #myEcharts2 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 300px;
            width: 300px;
          }
        }
      }
    }

    .line {
      width: 2.5px;
      height: 250px;
      background-color: #d7d7d7;
    }
  }
}

.line {
  border: 1px solid #ccc;
}

.down {
  padding: 0 35px 0 35px;

  .cardDown {
    height: 500px;
    position: relative;
    .text {
      position: absolute;
      font-weight: bold;
    }
  }

  .echarts {
    #myEcharts {
      height: 500px;
      width: 100%;
    }
  }
}

@media screen and (min-width: 3900px) {
  .drill {
    width: 3000px;
  }
}
</style>
